<template>
	<div class="addHot">
		<aside class="as1">
			<router-link to="/admin/img"><span>返回 | 书城管理——热度图片管理</span></router-link>
			<button @click="html()"><i class="el-icon-refresh-right"></i></button>
		</aside>
		<div class="box">
			    <el-upload class="avatar-uploader" :multipe="false" 
			                :show-file-list="true" :auto-upload="false"
			                :before-upload="beforeAvatarUpload" 
			                :file-list="fileList"                            
			                :on-change="handleChange"
			                action = "uploadAction"
			                list-type="picture"
			                accept="image/jpg,image/jpeg">
			                <img v-if="imageUrl" :src="`${$ip}/api/public/showimg/${imageUrl}`" class="avatar">
			                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
			         </el-upload>
		<el-form ref="form" :model="form" label-width="100px">
		  <el-form-item label="类型-整数">
		    <el-input v-model="form.type"></el-input>
			<span>类型可自定义：1=轮播图 2=广告</span>
		  </el-form-item>
		  <el-form-item label="优先级-整数">
		    <el-input v-model="form.hot"></el-input>
			<span>数字越大，显示在前面</span>
		  </el-form-item>
		  <el-form-item label="描述">
		    <el-input type="textarea" v-model="form.memo" placeholder="请输入信息"></el-input>
		  </el-form-item>
		  <el-form-item>
		    <el-button type="primary" @click="submitImg()"><i class="el-icon-folder-add"></i>  保存</el-button>
		  </el-form-item>
		</el-form> 			 
	</div>
</div>
</template>

<script>
	export default {
		name:'AddHot',
		data(){
			return{
				fileList: [],
				imageUrl:'',
				form:{
					id:0,
					type:0,
					hot:0,
					memo:'',
				},
			}
		},
		methods: { //处理函数
		html(){
			location.reload();
		},
		            handleChange: function(file, fileList) {
		                 this.fileList = fileList;
						 console.log(this.fileList);
		            },
		            beforeAvatarUpload(file) {
		                const isJPG = file.type === 'image/jpeg';
		                const isLt2M = file.size / 1024 / 512;
		
		                if (!isJPG) {
		                    this.$message.error('上传图片只能是 JPG 格式!');
		                }
		                if (!isLt2M) {
		                    this.$message.error('上传图片大小不能超过 0.5MB!');
		                }
		                return isJPG && isLt2M;
		            },
		            submitImg() {
		                let formData = new FormData();
		                let fs = this.fileList;
						if(fs.length >0 && fs[0].raw != null){
							formData.append("pic", fs[0].raw);
						}
						formData.append("id",this.form.id);
						formData.append("type", this.form.type);
						formData.append("hot", this.form.hot);
						formData.append("memo", this.form.memo);
		                this.$postf('/api/adm/hot/add',formData).then((resp)=>{
							this.imageUrl = resp.data.data.picture;
							this.$message({
								message:resp.data.msg,
								type:'success'
							})
						})
		                this.form = {};
		            }
		        },
			mounted() {
				if(this.$route.query.id != null){
					this.$get('/api/adm/hot/findById/'+this.$route.query.id).then((resp)=>{
						this.form.id = resp.data.data.id;
						this.form.type = resp.data.data.type;
						this.form.hot= resp.data.data.hot;
						this.form.type = resp.data.data.type;
						this.form.memo = resp.data.data.memo;
						this.imageUrl = resp.data.data.picture;
					 })
				}
			}
	}
</script>

<style scoped>
	a{
		color: black;
	}
	.addHot{
		width: 80%;
		margin: 20px auto;
		
	}
	.as1{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: #23262e 1px solid;
	}
	.box{
		width: 100%;
		height: 100%;
		margin-top: 10px;
		
		display: flex;
	}
	  .avatar-uploader:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
		border: 2px #000000 dotted;
		border-radius: 8px;
	    font-size: 40px;
	    color: #8c939d;
	    width: 400px;
	    height: 400px;
	    line-height: 400px;
	    text-align: center;
	  }
	  .avatar {
	    width: 178px;
	    height: 178px;
	    display: block;
	  }
	 .as1  button{
	  	background-color: #009688;
	  	border: none;
	  	outline: none;
	  	color: white;
	  	height: 40px;
	  	width: 60px;
	  	border-radius: 3px;
		margin-bottom: 10px;
	  }
	  .el-form{
		  width: 40%;
		  height: 400px;
	  }
	 .avatar-uploader  img{
		 width: 400px ;
		 height: 400px ;
	 }
	
</style>
